<template>
    <div class="detial-footer">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon icon="shop-o" text="店铺" />
            <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="show = !show" v-if="show == false" />
            <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="sumbmitData" v-else />
            <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="show = !show" v-if="show == false" />
            <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="buygoodsHandler" v-else />
        </van-action-bar>
        <div class="detial-footer-dialog">
            <van-cell title="监听点击事件" is-link @click="show = !show" />
            <van-popup v-model:show="show" position="bottom" :style="{ height: '176px' }" closeable
                @click-overlay="show = false">
                <div class="dialog-content">
                    <img :src="infoList?.primary_pic_url" alt="" class="dialog-content-img">
                    <div class="dialog-content-info">
                        <div class="info-price">价格：￥{{ infoList?.retail_price }}</div>
                        <div class="info-num">数量:</div>
                        <div class="info-computed"><van-stepper v-model="value" input-width="31px" button-size="28px" />
                        </div>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue'
import { LS_Pro } from '@/util/storage';
import { submitcartApi } from '@/api/detail'
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const show = ref<boolean>(false)
const infoList = ref<detialNs.IinfoData>({ id: 0, name: '', goods_brief: '', retail_price: 0, goods_desc: '', primary_pic_url: '' })
const value = ref<number>(1)
const router = useRouter()
const sumbmitData = async () => {
    let res = await submitcartApi((infoList.value.id).toString(), value.value)
    if (res.data == 'success') {
        showToast({
            message: '加入购物车成功哦^_^',
            icon: 'smile-o',
        });
    } else {
        showToast({
            message: '加入购物车失败啦~~',
            icon: 'flower-o',
        });
    }
    show.value = false

}
const buygoodsHandler = () => {
    router.push({ name: 'order', query: { number: value.value } })
}
onMounted(() => {
    infoList.value = LS_Pro.get('infoList')
})
</script>

<style  lang="scss">
.detial-footer {
    .detial-footer-dialog {
        .van-popup--bottom {
            bottom: 50px;
        }
        .dialog-content {
            width: 3.14rem;
            height: 1.04rem;
            padding: 36px 30.5px;
            display: flex;

            .dialog-content-img {
                width: 1rem;
                height: 100%;
                margin-right: 33px;
            }

            .dialog-content-info {
                width: 0.91rem;
                height: 100%;
                // background: red;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .info-price {
                    font-size: 15px;
                    color: #333;
                }

                .info-num {
                    font-size: 15px;
                    color: #333;
                }
            }
        }
    }
    .van-action-bar {
        z-index: 9999;
    }
}
</style>